<template>
<div>
    <RadioGroup v-model="paging.status" type="button" @on-change="fRadio">
        <Radio label=-1>全部</Radio>
        <Radio label=0>待支付</Radio>
        <Radio label=1>支付失败</Radio>
        <Radio label=2>待领取</Radio>
        <Radio label=3>待归还</Radio>
        <Radio label=5>已经完成</Radio>
        <Radio label=6>已取消</Radio>
    </RadioGroup> <Button type="primary" @click="toExcel">订单导出</Button>
    <Table border :columns="columns" :data="data"></Table>
    <Page :total="paging.total" @on-change="changepage" :page-size="paging.size"></Page>
</div>
</template>
<script>
import util from '../libs/util';
    export default {

        created() {
            this.initFormatter(); 
            this.paging = {
                page:1,
                size:8,
                status: -1
            };
            this.load_data(this.paging);
            this.columns = [
                    {
                        title: '订单号',
                        key: 'order_num',
                    },
                    {
                        title: '商品类型',
                        key: 'type',
                        render: (h, params) => {
                            var value = '享堂集市';
                            if(params.row.commit_info.type == 2){
                                value='享堂书院'
                            }
                            if(params.row.type == 3){
                                value='享堂学院'
                            }
                            return h('div', [
                                h('p', value)
                            ]);
                        }
                    },
                    {
                        title: '商品名称',
                        key: 'type',
                        render: (h, params) => {
                            var value = params.row.commit_info.name;
                            if(params.row.commit_info.type == 2){
                                value = params.row.commit_info.topic;
                            }
                            return h('div', [
                                h('p', value)
                            ]);
                        }
                    },
                    {
                        title: '商品图片',
                        key: 'head',
                        render: (h, params) => {
                            var imgUrl = params.row.commit_info.head.split(";")[0]
                            return h("img",{
                                    attrs: {
                                        src: imgUrl,
                                    },
                                    style:{
                                        width:"px",
                                        height:"45px",
                                    },
                            })
                     }
                    },
                    {
                        title: '租赁',
                        key: 'rent',
                        render: (h, params) => {
                            console.log(params.row);
                            var value = '否';
                            if (params.row.is_rent == 1) {
                                value = "租"+params.row.rent_period+"天";
                            }
                            return h('div', [
                                h('p', value)
                            ]);
                        }
                    },
                    {
                        title: '单价',
                        key: 'bean',
                    },
                    {
                        title: '买家id',
                        key: "buyer.id",
                        render: (h, params) => {
                           var value = params.row.buyer.id;
                            return h('div', [
                                h('p', value)
                            ]);
                        }
                    },
                    {
                        title: '买家电话',
                        key: "buyer.id",
                        render: (h, params) => {
                           var value = params.row.buyer.phone;
                            return h('div', [
                                h('p', value)
                            ]);
                        }
                    },
                    {
                        title: '订单状态',
                        key: 'status',
                        render: (h, params) => {
                            var values = ["待支付", "支付失败", "待领取", "待归还", "", "已经完成", "已取消"];
                            var value =  values[params.row.status];
                            console.log(params);
                            if (params.row.spell_info) {
                                value =  values[params.row.spell_info.status];
                            }
                            return h('div', [
                                h('p',value)
                            ]);
                        }
                    },
                    {
                        title: '订单类型',
                        key: 'status',
                        render: (h, params) => {
                            var value =  "非凑单";
                            if (params.row.spell_info) {
                                value =  "凑单";
                            }
                            return h('div', [
                                h('p',value)
                            ]);
                        }
                    },
                    {
                        title: '下单时间',
                        key: 'time',
                        render: function (h, params) {
                            return h('div', 
                               new Date(params.row.time*1000).Format('yyyy-MM-dd mm:ss')
                            );
                        }
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.show(params.index)
                                        }
                                    }
                                }, '详情'),
                            ]);
                        }
                    }
                ];
          
        },
        data () {
            return {
                columns: [],
                data: [],
                paging: {},
            }
        },
        methods: {
            fRadio() {
               this.paging.page = 1;
               this.load_data(this.paging);
            },
            load_data(paging) {
                this.$http.post(util.baseURL+"order/getOrderList",paging,
                    {emulateJSON: true})
                    .then(
                        (response)=>{
                            if(response.data.data) {
                              this.data = response.data.data.list;
                              //console.log(this.data);
                              this.paging.total = response.data.data.total;
                            } else {
                               this.$Message.error("暂无用户列表！");
                            }
                        },
                        (error)=>{
                            console.log(error);
                        }
                );
            },
            show (index) {
                var query = {order_num : this.data[index].order_num};
                this.$router.push({path:"/index/orderinfo",query: query});
            },
            changepage(page) {
                this.paging.page = page;
                this.load_data(this.paging);
            },
            initFormatter(){
                Date.prototype.Format = function(fmt) { //
                    let o = {  
                        "M+" : this.getMonth()+1,                 //月份  
                        "d+" : this.getDate(),                    //日  
                        "h+" : this.getHours(),                   //小时  
                        "m+" : this.getMinutes(),                 //分  
                        "s+" : this.getSeconds(),                 //秒  
                        "q+" : Math.floor((this.getMonth()+3)/3), //季度  
                        "S"  : this.getMilliseconds()             //毫秒  
                    };  
                    if(/(y+)/.test(fmt))  
                        fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));  
                    for(var k in o)  
                        if(new RegExp("("+ k +")").test(fmt))  
                            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));  
                    return fmt;  
                }
            },
            // 订单导出
            toExcel() {
                this.$http.post(util.baseURL+"order/exportOrder",{status: -1},
                    {emulateJSON: true})
                    .then(
                        (response)=>{
                            if(response.data.data) {
                              window.open(util.baseURL+response.data.data.download);
                            } else {
                               this.$Message.error("暂无用户列表！");
                            }
                        },
                        (error)=>{
                            console.log(error);
                        }
                );
            }
        }
    }
</script>
